<!--
 * @Author: zhangxiangsheng 1026583651@qq.com
 * @Date: 2024-04-10 13:44:29
 * @LastEditors: libing 964368540@qq.com
 * @LastEditTime: 2024-06-13 00:02:15
 * @FilePath: \crm\pagesecharts\index\components\card5.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
-->
<template>
  <view class="card">
    <view class="title u-flex u-flex-between">
      <view class="u-flex">
        <u--image
          :src="$z.imgsrc('notice-icon.png')"
          width="36rpx"
          height="36rpx"
        ></u--image>
        <view class="text">公告管理</view>
      </view>

      <u-icon name="arrow-right" size="12" color="#999999"></u-icon>
    </view>
    <view class="list">
      <view
        class="item"
        v-for="(item, index) in list"
        :key="index"
        :style="{
          backgroundImage: `url(${$z.imgsrc('home_img_lb.png')})`,
        }"
      >
        <view class="text1">{{ item.text1 }}</view>
        <view class="text2">{{ item.text2 }}</view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      list: [
        {
          text1: "这是公告标题",
          text2: "2023.12.23 09:00",
        },
        {
          text1: "这是公告标题",
          text2: "2023.12.23 09:00",
        },
      ],
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {},
  },
};
</script>
<style lang="scss" scoped>
.card {
  margin: 14rpx 18rpx;
  background-color: #fff;
  border-radius: 8rpx;
  // padding: 0 24rpx;
  // padding-bottom: 16rpx;
  .title {
    font-size: 28rpx;
    font-weight: bold;
    height: 88rpx;
    padding: 0 24rpx;
    .text {
      padding-left: 12rpx;
      line-height: 1;
    }
  }
  .list {
    // display: flex;
    // flex-wrap: wrap;
    // justify-content: space-between;
    padding: 0 24rpx;
    padding-bottom: 2rpx;
    .item {
      // width: 210rpx;
      background-color: #f7f8f8;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      // align-items: center;
      margin-bottom: 18rpx;
      height: calc(60 * 2rpx);
      border-radius: 8rpx;
      padding: 24rpx 20rpx;
      background-position: center;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      .text2 {
        color: #838589;
        font-size: 24rpx;
        line-height: 1;
      }
      .text1 {
        color: #171a1d;
        font-size: 28rpx;
        line-height: 1;
        font-weight: bold;
      }
    }
  }
}
</style>
